import {View} from 'react-native';
import {Card, Text, useAppTheme} from 'tsun-smart-ui';
import {useTranslation} from 'react-i18next';
import {useDeviceInfo} from './DeviceInfoContext';
import {useMMKVObject} from '@/hooks/useMMkv';
import {UserInfo} from '@/services/api/userApi';
import Logo from '../Logo';

const DeviceAlarm = () => {
  const theme = useAppTheme();
  const {t} = useTranslation();
  const {errors, alarmNum} = useDeviceInfo();
  const [userInfo] = useMMKVObject<UserInfo>('user_info');
  return (
    <Card
      title={
        <View className="flex-row flex-between">
          <View className="flex-row items-center">
            <Logo
              name="Alarm"
              backgroundColor={theme.colors?.error?.light!}
              color={theme.colors?.error?.primary!}
              round={false}
            />
            <Text className=" ml-2" variant="bodyStrong">
              {t('user.alarminformation', {defaultValue: '报警信息'})}
            </Text>
          </View>
          <View className="flex-row items-center gap-x-3">
            {errors?.[0]?.ct && alarmNum > 0 && (
              <Text
                variant="caption"
                style={{
                  color: theme.colors?.neutral?.primary,
                }}>
                {Intl.DateTimeFormat('en-US', {
                  hour: 'numeric',
                  minute: 'numeric',
                  timeZone: userInfo?.timezone,
                }).format(new Date(errors[0].ct))}
              </Text>
            )}
          </View>
        </View>
      }>
      <View className="flex-row  mt-5">
        <Text variant="caption">{`${t('message.box.title')}: ${
          alarmNum > 0
            ? t(errors?.[0]?.code, errors?.[0]?.message)
            : t('message.operatingNormallyNoAlarmInfor')
        }`}</Text>
      </View>
    </Card>
  );
};
export default DeviceAlarm;
